<template>
    <view class="page" style="overflow-x: scroll;">
        <div style="width: 950px; align-content: center;">
            <div style=" z-index: -1;display: flex;
                        -ms-flex-align: center;
                        align-items: center;
                        -ms-flex-pack: center;
                        justify-content: center;
                        -ms-flex-direction: column;
                        flex-direction: column;">
                <div>
                    <table class="daying" style=" border-spacing: 0;border: none;margin-top: 10px;
                                            width: 100%;
                                            border-collapse: collapse;
                                            font-family: 宋体;
                                            color: #000">
                        <tr>
                            <td rowspan="3" align="right" style="border: none; overflow-wrap: normal;"><img
                                    src="@/static/quanan-log.png" height="80px" width="90px"></td>
                            <td style="border: none;"></td>
                        </tr>
                        <tr>
                            <td style="border: none;"></td>
                            <td colspan="2" align="left" style="border: none; font-weight: bold;">
                                <span style="font-size: 32px; color: black; line-height: 35px;">广 东 全
                                    安 检 测 科 技 有 限 公
                                    司</span>
                            </td>&nbsp;

                        </tr>
                        <tr>
                            <td style="border: none;"></td>
                            <td align="left" style="border: none; font-weight: bold;"><label
                                    style="color: black; font-size: 26px;">GuangDong QuanAn Testing
                                    Technology Co.,Ltd</label></td>
                        </tr>
                    </table>
                </div>
                <div
                    style="width: 90%; height: 2px; padding: 0px; background-color: black; overflow: hidden; margin-top: 3px; font-weight: bold;">
                </div>
                <div
                    style="width: 90%; height: 1px; padding: 0px; background-color: black; overflow: hidden; margin-top: 2px; font-weight: bold;">
                </div>
                <div style="width: 95%;
    font-family: 宋体;
    display: flex;
    justify-content: center;margin-bottom: 50px;position: relative;">
                    <div style="display: flex;
    flex-direction: column;">
                        <div style="font-size: 24px; color: black; margin-top: 10px;">
                            检 测 报 告
                        </div>
                        <div style="font-size: 24px; color: black; margin-top: 30px; font-family: 宋体;">
                            TEST REPORT
                        </div>
                    </div>
                    <div style="position: absolute; margin-top: 8px;
    right: 3%;">
                        <vue-qr :logoSrc="logourl" :margin="3"
                            :text="`http://www.gdquanan.com/#/pages/qr_info/d?no=${formdata.no}`" :size="130"></vue-qr>
                        <div style=" text-align: center; font-size: 10px;line-height: 12px; font-family: 宋体;">
                            扫描二维码辨别报告真伪
                        </div>
                    </div>
                </div>
                <div style="width: 90%;">
                    <div><span style="color: black; font-weight: bold; font-size: 15px; font-family: 黑体;">报告编号：</span>
                        <span style="font-size: 15px;font-weight: bold; font-family: 宋体; color: black;">{{ formdata.no
                            }}</span>
                    </div>
                    <div>
                        <table class="daying" style="border-spacing: 0;
                            width: 100%;
                            border-collapse: collapse;
                            font-family: 宋体;
                            color: #000">
                            <tr>
                                <td align="center" style="width: 15%; height: 30px;"><span
                                        style="color: black; font-weight: bold; font-size: 14px; font-family: 黑体;">委托单位/人</span>
                                </td>
                                <td align="center" style="width: 35%;"><span style="font-size: 14px;">{{
                            formdata.client_name }}</span></td>
                                <td align="center"><span
                                        style="color: black; font-weight: bold; font-size: 14px; font-family: 黑体;">送检日期</span>
                                </td>
                                <td align="center"><span style="font-size: 14px;">{{
                            vk.pubfn.timeFormat(formdata.detect_time, "yyyy年MM月dd日") }}</span></td>
                            </tr>
                            <tr>
                                <td align="center" style="height: 30px;"><span
                                        style="color: black; font-weight: bold; font-size: 14px; font-family: 黑体;">抽/送样者</span>
                                </td>
                                <td align="center"><span style="font-size: 14px;">{{ formdata.submitUser }}</span></td>
                                <td align="center"><span
                                        style="color: black; font-weight: bold; font-size: 14px; font-family: 黑体;">检测类别</span>
                                </td>
                                <td align="center"><span style="font-size: 14px;">
                                        {{ formdata.detection_type }}</span></td>
                            </tr>
                            <tr>
                                <td align="center" style="height: 30px;"><span
                                        style="color: black; font-weight: bold; font-size: 14px; font-family: 黑体;">检测项目</span>
                                </td>
                                <td align="center"><span style="font-size: 14px;">{{
                            formdata.detection_standard_name }}</span></td>
                                <td align="center"><span
                                        style="color: black; font-weight: bold; font-size: 14px; font-family: 黑体;">检测标准</span>
                                </td>
                                <td align="center"><span style="font-size: 14px;">{{
                            formdata.detection_standard }}</span>
                                </td>
                            </tr>
                        </table>
                    </div>
                </div>
                <div
                    style="align-items: center; font-size: 18px; margin-top: 6px; margin-bottom: 6px; font-family: 宋体; color: black;">
                    检 测 结 果</div>
                <div style="width: 90%;">
                    <div>
                        <div>
                            <table class="daying" style=" border-spacing: 0;
                                    width: 100%;
                                    border-collapse: collapse;
                                    font-family: 宋体;
                                    color: #000">
                                <tr style="height: 30px;">
                                    <td align="center"><span
                                            style="font-weight: bold; font-size: 14px; font-family: 黑体;">序号</span>
                                    </td>
                                    <td align="center"><span
                                            style="color: black; font-weight: bold; font-size: 14px; font-family: 黑体;">样品编号</span>
                                    </td>
                                    <td align="center"><span
                                            style="color: black; font-weight: bold; font-size: 14px; font-family: 黑体;">样品名称</span>
                                    </td>
                                    <td align="center" colspan="2"><span
                                            style="color: black; font-weight: bold; font-size: 14px; font-family: 黑体;">检测结论</span>
                                    </td>
                                    <td align="center" colspan="2"><span
                                            style="color: black; font-weight: bold; font-size: 14px; font-family: 黑体;">样品结果</span>
                                    </td>
                                    <td align="center"><span
                                            style="color: black; font-weight: bold; font-size: 14px; font-family: 黑体;">备注</span>
                                    </td>
                                </tr>
                                <!-- 动态行高和字体大小 -->
                                <tr v-for="(detail, index) in formdata.sample_list" :key="index"
                                    style="height: 30px;font-size: 14px; font-family: 黑体;">
                                    <td align="center">{{ index + 1 }}</td>
                                    <td align="center">{{ detail.sampleno }}</td>
                                    <td align="center">{{ detail.samplename }}</td>
                                    <td align="center" colspan="2">{{ detail.result }}</td>
                                    <td align="center" colspan="2">{{ detail.yxresult }}</td>
                                    <td align="center">{{ detail.remark }}</td>
                                </tr>
                            </table>
                        </div>
                    </div>
                </div>
                <div
                    style="width: 90%; font-size: 14px; font-weight: bold; margin-top: 3%; margin-bottom: 10%; position: relative;">

                    <div
                        style="z-index: 999; position: absolute; transform: translateX(-140%) translateY(-27%); margin-left: 100%;">
                        <img src="https://mp-5fe77170-8511-415d-8f6e-02d647d2979a.cdn.bspapp.com/cloudstorage/b79544a0-ae47-4ab4-b62f-8ca500865b90.png"
                            width="150px;" height="150px;">
                    </div>
                    <div
                        style="margin-left: 100%; white-space: nowrap; position: absolute; transform: translateX(-100%); font-family: 黑体;">
                        此处未盖本公司快检专用章，则本报告无效。
                    </div>
                </div>
                <div style="display: flex; flex-direction: row; justify-content: space-between; width: 90%;">
                    <div
                        style="width: 33%; font-size: 14px; font-weight: bold; font-family: 黑体; display: flex; position: relative;">
                        <div>检测人:</div>
                        <div style="position: absolute; left: 28%; top: -80%;"><span>
                                <img v-if="$fn.isNotNull(formdata.detection_user_info.sign_image)" width="100px"
                                    height="40px" :src="formdata.detection_user_info.sign_image">
                            </span>
                        </div>
                    </div>
                    <div
                        style="width: 33%; font-size: 14px; font-weight: bold; font-family: 黑体; display: flex; position: relative;">
                        <div>审核人:</div>
                        <div style="position: absolute; left: 28%; top: -60%;">
                            <img src="https://mp-5fe77170-8511-415d-8f6e-02d647d2979a.cdn.bspapp.com/cloudstorage/097aaf25-357c-44d6-8325-27a73b5efde6.png"
                                width="100px" height="40px">
                        </div>
                    </div>
                    <div style="width: 34%;"><span
                            style="font-size: 14px; font-weight: bold; font-family: 黑体;">签发日期:</span> <span
                            style="font-family: 宋体; font-size: 14px; color: black;">{{
                            vk.pubfn.timeFormat(formdata.detect_time, "yyyy年MM月dd日") }}</span></div>
                </div>
                <div style="width: 90%; margin-top: 20px;"><span
                        style="color: black; font-size: 11px; line-height: 13px; font-family: 宋体;">
                        <span
                            style="font-weight: bold; font-size: 14px;line-height: 20px; font-family: 黑体;">注：请客户仔细阅读检测报告的申明</span>
                        <br>1. 委托单位信息和抽、送样者信息由委托方提供及确认，本检测室不对其真实性负责。
                        <br>2. 报告无“快检专用章”无效；报告随意涂改无效。
                        <br>3. 当结果未超出相关要求时，检测结果为“经检测XX残留量未超出相关要求”。
                        <br>4. 本报告仅对来样负责，若客户无特殊要求，已检样品将不作保存。
                        <br>5. 如果对检测报告有异议，应于报告出具之日起五日内向本公司提出，或者到有资质的权威检测机构进行验证，逾期不予受理。
                        <br>6. 若对报告真伪有疑问，可致电：13922173334、13760015306
                    </span></div>
                <div
                    style="width: 90%; height: 2px; padding: 0px; background-color: black; overflow: hidden; margin-top: 3px; font-weight: bold;">
                </div>
                <div
                    style="width: 90%; height: 1px; padding: 0px; background-color: black; overflow: hidden; margin-top: 2px; font-weight: bold;">
                </div>
                <div style="display: flex; align-content: space-between; width: 90%;color: #606266;">
                    <div style="font-size: 12px; font-family: 黑体;">广 东 全 安 检 测 科 技 有 限 公 司</div>
                    <div
                        style="margin-left: 15%; font-size: 12px; font-family: 黑体; align-content: flex-end;color: #606266;">
                        地址：广州市白云区永平街永泰新村和街七巷22号之四5楼502房</div>
                </div>
                <div style="display: flex; width: 90%;">
                    <div style="font-size: 12px; font-family: 黑体;color: #606266;">GuangDong QuanAn Testing
                        Technology
                        Co.,Ltd
                    </div>
                    <div style="margin-left: 9.5%; font-size: 12px; font-family: 黑体;color: #606266;">
                        客服电话：020-32784686</div>
                </div>
            </div>
        </div>
    </view>
</template>
<script>
import VueQr from 'vue-qr';
var that;													// 当前页面对象
var vk = uni.vk;									// vk实例
export default {
    components: {
        VueQr
    },
    data() {
        // 页面数据变量
        return {
            activeName: 'first',
            formdata: {

            },
            logourl: require('@/static/logo.png'),
            count: 0
        }
    },
    // 监听 - 页面每次【加载时】执行(如：前进)
    onLoad(options = {}) {
        that = this;
        vk = that.vk;
        that.options = options;
        that.init(options);
        // console.log(vk.getVuex('$user.userInfo').nickname)
        // this.form1.data.enterprise_name = vk.getVuex('$user.userInfo').nickname
    },
    // 监听 - 页面【首次渲染完成时】执行。注意如果渲染速度快，会在页面进入动画完成前触发
    onReady() {

    },
    // 监听 - 页面每次【显示时】执行(如：前进和返回) (页面每次出现在屏幕上都触发，包括从下级页面点返回露出当前页面)
    onShow() {


    },
    // 监听 - 页面每次【隐藏时】执行(如：返回)
    onHide() {


    },
    // 函数
    methods: {
        // 页面数据初始化函数
        init(options) {

            vk.callFunction({
                url: 'client/pub.get_detectionfrom',
                title: '请求中...',
                data: {
                    no: options.no
                },
                success: (data) => {
                    this.formdata = data.data;
                    this.count = this.formdata.sample_list.length;

                 

                    if (this.formdata.sample_list.length < 10) {
                        const row = 10 - this.formdata.sample_list.length
                        for (let i = 0; i < row; i++) {
                            this.formdata.sample_list.push({
                                sampleno: i == 0 ? '以下空白' : ''

                            })
                        }

                    } else if (this.formdata.sample_list.length > 10 && this.formdata.sample_list.length < 20) {
                        const row = 20 - this.formdata.sample_list.length
                        for (let i = 0; i < row; i++) {
                            this.formdata.sample_list.push({
                                sampleno: i == 0 ? '以下空白' : ''

                            })
                        }
                    } else if (this.formdata.sample_list.length > 10 && this.formdata.sample_list.length < 30) {
                        const row = 30 - this.formdata.sample_list.length
                        for (let i = 0; i < row; i++) {
                            this.formdata.sample_list.push({
                                sampleno: i == 0 ? '以下空白' : ''

                            })
                        }
                    } else if (this.formdata.sample_list.length > 10 && this.formdata.sample_list.length < 40) {
                        const row = 40 - this.formdata.sample_list.length
                        for (let i = 0; i < row; i++) {
                            this.formdata.sample_list.push({
                                sampleno: i == 0 ? '以下空白' : ''

                            })
                        }
                    }
                }
            });


        },

    },
    // 过滤器
    filters: {

    },
    // 计算属性
    computed: {

    }
}
</script>
<style lang="scss" scoped>
body {
    overflow-x: scroll !important;
}

.page {
    padding-bottom: 20px;
}



.daying {
    font-size: 12px;
}

.daying tr td {
    font-size: 14px;
    word-break: break-all;

    border: 1px solid rgb(0, 0, 0);
}
</style>
